<x-admin::layouts.master>
    <div class="p-6">
        <h1 class="text-2xl font-bold text-gray-800 mb-4">组件列表</h1>
        
        <div class="bg-white rounded-lg shadow p-4">
            <div class="layui-tab" lay-filter="test-hash">
                <ul class="layui-tab-title">
                    @foreach(config("modules.type_modules") as $key => $value)
                        <li class="{{ $key == 'Modules' ? 'layui-this' : '' }}" lay-id="{{ $key }}">{{ $value }}</li>
                    @endforeach
                </ul>
                <div class="layui-tab-content">
                    @foreach(config("modules.type_modules") as $key => $value)
                        <div class="layui-tab-item {{ $key == 'Modules' ? 'layui-show' : '' }}">
                            <div class="layui-fluid">
                                <div class="layui-row layui-col-space15">
                                    @php $count = 0; @endphp
                                    @foreach($modulesInfo as $moduleName => $moduleInfo)
                                        @if(isset($moduleInfo["type"]["main"]) && $moduleInfo["type"]["main"] == $key)
                                            <div class="layui-col-md2">
                                                <div class="layui-card hover-shadow">
                                                    <div class="layui-card-header">
                                                        <strong>{{ $moduleName }}</strong>
                                                    </div>
                                                    <div class="layui-card-body">
                                                        @if(isset($moduleInfo["icon"]) && !empty($moduleInfo["icon"]))
                                                        <div class="module-icon text-center mb-2">
                                                            <img src="{{ $moduleInfo['icon'] }}" alt="{{ $moduleName }}" style="height: 48px; margin: 0 auto;">
                                                        </div>
                                                        @endif
                                                        <p class="module-desc" style="height: 60px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;">
                                                            {{ $moduleInfo["description"] ?? '暂无描述' }}
                                                        </p>
                                                        <div class="module-actions mt-3 text-right">
                                                            <a href="#" class="layui-btn layui-btn-xs layui-btn-normal">详情</a>
                                                            <a href="#" class="layui-btn layui-btn-xs">安装</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            @php $count++; @endphp
                                            @if($count % 6 == 0)
                                                </div><div class="layui-row layui-col-space15 mt-3">
                                            @endif
                                        @endif
                                    @endforeach
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>

    <style>
    .hover-shadow:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
        transition: all 0.3s;
    }
    .layui-card {
        height: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
    }
    .layui-card-header {
        font-weight: bold;
        color: #333;
        height: auto;
        padding: 12px 15px;
    }
    .layui-card-body {
        flex: 1;
        padding: 15px;
    }
    .module-actions {
        margin-top: auto;
    }
    </style>

    <script>
    layui.use(['element'], function(){
        var element = layui.element;
        
        // 监听Tab切换
        element.on('tab(test-hash)', function(elem){
            console.log(elem); // 当前Tab元素
        });
    });
    </script>
</x-admin::layouts.master> 